このページは私用WordPressの覚え書き兼、テストページです。
「SNSボタン」は、テスト検証用に仮設置しているだけなので、押しても反応しません。

022 text-transform 効かない(勝手に見出しが大文字になる)

(備忘録)


見出しの英文が何故か大文字になって直らない

 ↑ この見出しの css は、下記のように記述していました。

/* 見出し(投稿記事のみ) */
div#innerbox h1 {
border: 2px solid #a9a9a9;/* グレイの罫巻き */
background: #d3d3d3;
color: #ffffff;
font-size: 1.5em;
padding: 5px 10px;
margin-bottom: 10px;
cursor: pointer;
font-variant: small-caps;
/* -webkit-box-shadow: 0 1px 1px rgba(0,0,0,.2); */
/* -moz-box-shadow: 0 1px 1px rgba(0,0,0,.2); */
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}


欧文を大文字か小文字かに制御するのは、text-transform というタグで定義できます。

text-transform タグ

text-transform: none;		/* 何もしません(入力したままの状態で表示)  */
text-transform: capitalize;	/* 各単語の一文字目を大文字に変換、(他の文字は入力したままの状態)  */
text-transform: uppercase;	/* 各単語全ての文字を大文字に変換  */
text-transform: lowercase;	/* 各単語全ての文字を小文字に変換  */


text-transform: none; を、入れたのですが、まったく効かない。
body{ } に入れていて、効かないので、

div#innerbox h1 { } にも入れてみた。
やっぱり効かない。
大文字のまま。


さんざん調べたけど、効かない理由がわからない。
style.css 内を検索しても、他に text-transform: タグを使っている箇所は見つからない。


何故効かないのか・・・。


もう一度、よくよく div#innerbox h1 { } を見返してみたら・・・、

/* 見出し(投稿記事のみ) */
div#innerbox h1 {

font-variant: small-caps;

}

font-variant: small-caps; というタグが入っていたからでした・・・onz。


この一文をコメントアウトして隠したら、無事、ちゃんと効きました。


・・・見落とし ってコワイ。